<script setup lang="ts">
import { getArticleAPI } from '@/api/article';
import type { ArticleItem } from '@/types';
import { ref, watch } from 'vue';
import dayjs from 'dayjs';
import { useRouter } from 'vue-router';
const router=useRouter()

const props = defineProps<{
  activeId: number
}>();
const list = ref<ArticleItem[]>([])
const getArticle =async () => {
  const result=await getArticleAPI({
    channel_id: props.activeId,
    timestamp:Date.now()
  })
  list.value=result.results
}
watch(() => props.activeId, (newId) => {
  getArticle()
}, {
  immediate:true
})
</script>


<template>
  <div class="article-list">
    <div class="article-item" @click="router.push(`/detail/${i.art_id}`)" v-for="i in list" :key="i.art_id">
      <p class="title">{{ i.title }}</p>
      <template v-if="i.cover.type===3">
          <img  v-for="img in i.cover.images" key="img" class="img" :src="img" alt="">
     
      </template>
      <template v--else-if="i.cover.type===1">
          <img   class="img" :src="i.cover.images?.[0]" alt="">
     
      </template>
      <img class="img" src="https://yanxuan-item.nosdn.127.net/7afec01ce36598c7d22173b6c0e7fcf6.jpg" alt="">
     
      <div class="info">
        <span>{{ i.aut_name }}</span>
        <span>{{i.comm_count}}评论</span>
        <span>{{ dayjs(i.pubdate).fromNow()}}</span>
      </div>
    </div>
  </div>
</template>